$(function() {



    var iNow = 0
    var timer = null
    var flag = true
    tab()
    $('.thumbnail img').click(function() {
        iNow = $(this).index()
        var url = $(this).attr('src').split(',')[0]
        url += ',w_900'
        $('.smallBox img').attr('src', url)
        $('.bigBox img').attr('src', url)
        $('.thumbnail img').eq(iNow).css('border', '1px solid #65c722')
        $('.thumbnail img').eq(iNow).siblings().css('border', '1px solid #eee')
    });
    // $('.prev').click(function() {
    //     if (iNow != 0) {
    //         console.log(iNow);
    //         iNow--;
    //         console.log(iNow);
    //         picTab(iNow)
    //     }



    // })

    // $('.next').click(function() {
    //     if (iNow < $('.thumbnail img').length - 1) {
    //         console.log('+' + iNow);
    //         iNow++;
    //         picTab(iNow)
    //         console.log('+2' + iNow);
    //     }
    // })


    function tab() {
        timer = setInterval(picTab, 2000)
    }
    $('.smallBox,.mark').mouseenter(function() {
        console.log(111);
        clearInterval(timer)
    })
    $('.smallBox,.mark').mouseleave(function() {
        timer = setInterval(picTab, 2000)
    })




    function picTab(current) {
        if (current)
            iNow = current
        $('.thumbnail img').eq(iNow).css('border', '1px solid #65c722')
        $('.thumbnail img').eq(iNow).siblings().css('border', '1px solid #eee')
        var url = $('.thumbnail img').eq(iNow).attr('src').split(',')[0]
        url += ',w_900'
        $('.smallBox img').attr('src', url)
        $('.bigBox img').attr('src', url)
        iNow++
        if (iNow == $('.thumbnail img').length)
            iNow = 0
    }



    //放大镜
    $(".smallBox").mouseenter(function() {
        $(".bigBox").show();
    }).mouseleave(function() {
        $(".mark,.bigBox").hide();
    }).mousemove(function(ev) {
        var l = ev.clientX - $(this).offset().left - 105;
        var t = ev.clientY - $(this).offset().top - 105;
        //限制出界
        l = Math.max(0, l);
        l = Math.min(210, l);
        t = Math.max(0, t);
        t = Math.min(210, t);

        $(".mark").css({
            left: l,
            top: t
        })
        $(".bigBox img").css({
            left: -1.4 * l,
            top: -1.4 * t
        })
    })


    $('.introduce span').click(function() {
        var index = $(this).index()
        if (index == 0) {
            $(this).addClass('spanStyle')
            $(this).siblings().removeClass('spanStyle')
            $('.introduces').css('display', 'block')
            $('.serveItem').css('display', 'none')


        } else if (index == 1) {
            $(this).addClass('spanStyle')
            $(this).siblings().removeClass('spanStyle')

            $('.serveItem').css('display', 'block')
            $('.introduces').css('display', 'none')

        }
    })



    // $.ajax({
    //     type: "post",
    //     url: "/productDetail/detail",
    //     dataType: "json",
    //     success: function(response) {
    //         console.log(response);


    //     }
    // });

    // $("img").lazyload({
    //     threshold: 20
    // });



})